<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child</title>
    <style>
        li{
            margin: 0.5rem;
            padding: 0.5rem;
            list-style:none;
            color:width;
        }
        li:first-child{
            background-color:red
        }
        li:last-child{
            background-color:red
        }

        li:nth-child(3){
            background-color:gray !important
        }
        li:nth-child(3n+2){
            background-color:blue
        }
        li:nth-child(odd){
            background-color:orange
        }
        li:nth-child(even){
            background-color:pink
        }
    </style>

</head>

<body>
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
        <li>Item9</li>
        <li>Item10</li>
        <li>Item11</li>
        <li>Item12</li>
        <li>Item13</li>
        <li>Item14</li>
        <li>Item15</li>
        <li>Item16</li>
        <li>Item17</li>
        <li>Item18</li>
        <li>Item19</li>
        <li>Item20</li>
    </ul>
</body>

</html>